<template>
    <div class="box">
        <h3 class="title">热门文章</h3>
        <div class="p-post">
            <a v-for="item in hotArticle" :key="item.id">
                <h3 @click="handleclick(item.id)">{{ item.title }}</h3>
                <i class="iconfont icon-shijian"></i><span>{{ item.createTime }}</span>
            </a>
        </div>
    </div>

</template>


<script setup>
import { hotArticleListAPI, updateArticleViewCountAPI } from '@/api'
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()

let hotArticle = ref()
const inithotArticle = async () => {
    const res = await hotArticleListAPI()
    console.log("safaf", res)
    hotArticle.value = res
}

const handleclick = async (val) => {
    await updateArticleViewCountAPI(val)
    router.push({
        path: "/layout/articledetail",
        query: {
            articleId: val
        }
    }).catch(err => { })
}

inithotArticle()
</script>

<style lang="scss" scoped>
.box {
    border: .1rem solid rgba(0, 0, 0, 0.2);
    border-radius: .5rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: #fff;
}

.box .title {
    padding: 1.5rem;
    font-size: 2rem;
    text-align: center;
    color: #222;
    background: #fff;
    border-bottom: .1rem solid #676767;
}

.box .p-post {
    padding: 1rem 2rem;
}

.box .p-post a {
    padding: 1rem 0;
    cursor: pointer;
    display: block;
}

.box .p-post a h3 {
    color: #222;
    font-size: 1.8rem;
    font-weight: 500;
    padding-bottom: 1rem;
}

.box .p-post a i {
    color: #777;
    font-size: 2rem;
}

.box .p-post a span {
    color: #777;
    font-size: 1.7rem;
    margin-left: 1rem;
}

.box .p-post a:hover h3 {
    color: orange;
}
</style>